<template>
	<view class="bolck">
		<view class="logo">
			<image src="@/static/image/logo.png" mode=""></image>
		</view>
		<view class="xiahuaxian flexbetween" style="margin-top: 186rpx;">
			<view class="flexleft">
				<view class="sanshier xiaohei nofonweight margin_right1">+86</view>
				<input class="input" type="number" placeholder="请输入手机号" v-model="mobile">
			</view>
			<view class="xiaolv ershiba nofonweight" style="min-width: 150rpx;" @click="sendyzm" v-show="codetext == 1">发送验证码</view>
			<view class="xiaolv ershiba nofonweight" style="min-width: 150rpx;" v-show="codetext == 2">{{second}}s后重新获取</view>
			<view class="xiaolv ershiba nofonweight" style="min-width: 150rpx;" @click="sendyzm" v-show="codetext == 3">重新发送</view>
		</view>
		<view class="xiahuaxian margin_top">
			<input class="input" type="number" placeholder="请输入验证码" v-model="captcha">
		</view>
		<view class="bigbtn margin_top6" @click="submit">确定</view>
		<view class="gudingdb ffffff mainpadding flexcenter">
			<!-- 已勾选 -->
			<!-- <view class="yigouxuanl margin_right1"></view> -->
			<!-- 未勾选 -->
			<!-- <view class="erigouxl margin_right1"></view> -->
			<!-- <view class="flexleft">
				<view class="xiaohei strongtext nofonweight">已阅并同意</view>
				<view class="xiaolv strongtext fonweight">《用户协议》</view>
				<view class="xiaohei strongtext nofonweight">&</view>
				<view class="xiaolv strongtext fonweight">《隐私协议》</view>
			</view> -->
		</view>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				codetext: 1,
				second: 59,
				mobile:"",
				captcha:"",
				third_id:"",
			}
		},
		onLoad(options) {
			this.third_id = options.third_id
		},
		methods: {
			// 发送验证码
			sendyzm() {
				let _this = this;
				if (_this.mobile == '') {
					httpRequest.toast("请输入手机号码!")
					return;
				}
				// if (!_this.isMobile(_this.mobile)) {
				// 	httpRequest.toast("手机号码格式错误!")
				// 	return;
				// }
				httpRequest.request('/api/sms/send', 'POST', {
					mobile: this.mobile,
					event: 'mobilelogin',
				}, false, true, false).then(res => {
					if (res.code == 1) {
						httpRequest.toast('发送成功')
						_this.codetext = 2;
						_this.second = 59;
						let timer = setInterval(function() {
							if (_this.second > 1) {
								_this.second--;
							} else {
								clearInterval(timer);
								_this.codetext = 3;
							}
						}, 1000)
					}else{
						httpRequest.toast(res.msg)
					}
				})
			},
			submit(){
				if(this.mobile==""){
					httpRequest.toast("请输入手机号");
					return false;
				}
				// if(!this.isMobile(this.mobile)){
				// 	httpRequest.toast("手机号码格式错误!")
				// 	return;
				// }
				if(this.captcha==""){
					httpRequest.toast("请输入验证码")
					return false
				}
				uni.showLoading({
					mask:true,
					title:"请稍后"
				})
				httpRequest.request('/api/user/mobilelogin','GET',{
					mobile:this.mobile, 
					captcha:this.captcha,
					third_id:this.third_id
				}).then(res => {
					uni.hideLoading()
					httpRequest.toast(res.msg);
					if(res.code == 1){
						uni.setStorageSync('token',res.data.userinfo.token);
						uni.setStorageSync('user_id',res.data.userinfo.user_id);
						setTimeout(()=>{
							uni.navigateBack({
								delta:2
							})
						},1000)
					}
				})
			},
			isMobile(value) {
				let a = /^1[3|4|5|6|7|8|9][0-9]\d{8}$/.test(value); 
				return a;
			},
			// 跳转去登陆
			tzqdl() {
				uni.navigateTo({
					url: '/pages/login/login'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.input {
		width: 70%;
	}

	.zhengyan {
		background-image: url('@/static/image/system/zhengy.png');
		background-size: 100% 100%;
		width: 44rpx;
		height: 29.7rpx;
	}

	.biyan {
		background-image: url('@/static/image/system/biyan.png');
		background-size: 100% 100%;
		width: 44rpx;
		height: 29.7rpx;
	}

	.line {
		width: 47rpx;
		height: 2rpx;
		background-color: #AAAAAA;
	}

	.erigouxl {
		width: 26rpx;
		height: 26rpx;
		border: 1rpx solid #F1F1F1;
		border-radius: 50%;
	}

	.yigouxuanl {
		width: 28rpx;
		height: 28rpx;
		background-size: 100% 100%;
		background-image: url('@/static/image/system/yigoux.png');
	}

	.bolck {
		padding: 120rpx 64rpx 50rpx;
	}

	.logo {
		margin: auto;
		width: 176rpx;
		height: 176rpx;

		image {
			margin: auto;
			width: 100%;
			height: 100%;
		}
	}
</style>